<template>
  <div class="header">
    <a href="#/">
      <img class="logo" src="@/assets/logo(89x88).png">
      <span class="cellphone-sms">手机销售管理系统Cellphone - SMS</span>
    </a>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <!-- 下拉菜单 --><!-- 此处显示用户姓名 -->{{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
        <el-dropdown-item icon="el-icon-close" command="b">退出系统</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <!-- 修改密码的对话框 -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="376.5px">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="原密码" prop="oldPassword">
        <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input type="password" v-model="ruleForm.checkPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="$refs['ruleForm'].resetFields()">重置</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {logout} from '@/api/login' // 按需导入非默认成员
import passwordApi from '@/api/password'
export default {
  data() {
    
    // 注意：要在“return”关键字的上面声明自定义校验器（详见“ElementUI”官网，因为官网的例子里面就是这么做的（其实真正的原因是校验器里面调用了“return”关键字返回的“ruleForm”））
    // const validateOldPassword = null, // ←注意：此处在“null”的后面不能加逗号，否则后面的“return”关键字处会报错（因为“const”声明的是变量，它是一句话，后面要么不加标点符号，即使要加也只能按JavaScript的语法加分号，把分号作为结尾）↓
    const validateOldPassword = (rule,value,callback) => {
      console.log(rule)
      console.log(value)
      console.log(this.user.id)
      passwordApi.checkPassword(this.user.id,value).then(response => {
        const be_responsed_data = response.data
        if (be_responsed_data.flag) {
          callback() // ←左边这一项表示表单校验通过，直接调用回调函数
        } else {
          callback(new Error(be_responsed_data.message))
        }
      })
    }
    // 校验“确认密码”与“新密码”是否一致
    const validateCheckPassword = (rule,value,callback) => {
      // 注：“value”在此处指的是“确认密码”
      if (value!==this.ruleForm.newPassword) {
        callback(new Error('两个密码不一致'))
      }
      else{callback()}
    }

    return {
      user:this.$store.state.user.user,
      dialogFormVisible:false,
      ruleForm:{
        oldPassword:'',
        newPassword:'',
        checkPassword:''
      },
      rules:{
        oldPassword:[
          {required:true,message:'原密码不能为空',trigger:'blur'},
          {min:1,max:14,message:'密码的有效长度在1-14位字符之间',trigger:'blur'},
          { validator: validateOldPassword, trigger: 'blur' }
        ],
        newPassword:[
          {required:true,message:'新密码不能为空',trigger:'blur'},
          {min:1,max:14,message:'密码的有效长度在1-14位字符之间',trigger:'blur'},
        ],
        checkPassword:[
          {required:true,message:'确认密码必填写',trigger:'blur'},
          {min:1,max:14,message:'密码的有效长度在1-14位字符之间',trigger:'blur'},
          // { validator: validateCheckPassword, trigger: 'blur' }
          { validator: validateCheckPassword, trigger: 'change' }
        ],
      },
    }
  },
  methods: {
    handleCommand(command){
      switch(command){
        case 'a':
          // 修改密码（点击后打开“修改密码”对话框）
          // this.$message(`点击了修改密码`)
          this.$message({
            message:`点击了修改密码`,
            center:true
          })
          this.handlePassword()
          break ;
        case 'b':
          // 退出系统
          // this.$message(`点击了退出系统`)
          /* const token = localStorage.getItem('cellphone-sms-token')
          logout(token).then(response => {
            const be_responsed_data = response.data
            if (be_responsed_data.flag) {
              // 退出成功
              // 清除本地数据
              localStorage.removeItem('cellphone-sms-token')
              localStorage.removeItem('cellphone-sms-user')
              // 回到登录页面
              this.$router.push('/login')
            }
            else{
              this.$message({
                showClose: true,
                message: be_responsed_data.message,
                type: 'warning',
                center:true,
                duration: 500 // 此项表示弹出的消息提示框的停留时间，单位为毫秒
              });
            }
          }) */
          this.handleLogout()
          break ;
        default :
          break ;
      }
    },
    // 把上面的“退出系统”这一部分的代码抽取出来后放到这里↓
    handleLogout(){
      this.$store.dispatch('Logout').then(response => {
        if (response.flag) {
          // 退出成功
          // 回到登录页面
          this.$router.push('/login')
        } else {
          this.$message({
                showClose: true,
                message: be_responsed_data.message,
                type: 'warning',
                center:true,
                duration: 500 // 此项表示弹出的消息提示框的停留时间，单位为毫秒
              });
        }
      }).catch(error => {
        reject(error)
      })
      /* const token = localStorage.getItem('cellphone-sms-token')
          logout(token).then(response => {
            const be_responsed_data = response.data
            if (be_responsed_data.flag) {
              // 退出成功
              // 清除本地数据
              localStorage.removeItem('cellphone-sms-token')
              localStorage.removeItem('cellphone-sms-user')
              // 回到登录页面
              this.$router.push('/login')
            }
            else{
              this.$message({
                showClose: true,
                message: be_responsed_data.message,
                type: 'warning',
                center:true,
                duration: 500 // 此项表示弹出的消息提示框的停留时间，单位为毫秒
              });
            }
          }) */
    },
    // 打开“修改密码”对话框
    handlePassword(){
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields()
      })
    },
    // 提交修改密码的表单
    submitForm(formName){
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('表单校验通过')
          // 注意：因为必须在表单校验通过后才能提交表单，所以提交给后台的密码是“checkPassword”（即“确认密码”）而非“newPassword”（即“新密码”）↓
          passwordApi.updatePassword(this.user.id,this.ruleForm.checkPassword).then(response => {
            const be_responsed_data = response.data
            // 不管是否成功获取到后台响应的数据，都进行提醒。
            this.$message({
              message:be_responsed_data.message,
              center:true,
              type:be_responsed_data.flag?'success':'warning'
            })
            if(be_responsed_data.flag){
              this.handleLogout() // ←左边这一项表示“修改（更新）密码成功，退出系统，回到登录页面”
              // 关闭窗口
              this.dialogFormVisible = false
            }
          })
        }
        else {
          return false
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
  .logo{
    width: 30px;
    height: 30px;
    vertical-align: middle;
    padding: 0px 15px 0px 15px;
  }
  .cellphone-sms{
    position: absolute;
    line-height: 15px;
    padding: 0px 15px 0px 0px;
    top: 16px;
    vertical-align: middle;
    width: 120px;
    color: rgb(58, 182, 255);
    font-size: 0.9375em; /* 这一行等同于font-size: 15px; */    
    white-space: pre-wrap; /* 这一行表示span标签内的内容超出容器范围时将自动换行 */
    
  }
  a:link{color: rgb(58, 182, 255);text-decoration: none;} /* “text-decoration: none”表示“超链接不加下划线” */
  a:active{color: rgb(58, 182, 255);text-decoration: none;}
  a:hover{color: rgb(58, 182, 255);text-decoration: none;}
  a:visited{color: rgb(58, 182, 255);text-decoration: none;}
  /* 下拉菜单的样式↓ */
  .el-dropdown{
    float: right;
    margin-right: 15px;
  }
  .el-dropdown-link{
    color: rgb(58, 182, 255);
    cursor: pointer; /* 这一行表示鼠标指针悬停在下拉菜单上方时，指针的形状是手形 */  
  }
  .el-dropdown-menu__item{
    /* color: rgb(58, 182, 255); */
  }
  div{::v-deep.el-input{width: 150px;}}
  div{::v-deep.el-input__inner{text-align: center;width: 150px;}}
  div{::v-deep.el-form-item__error{left:37.5px;}}
  
</style>